<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>html5 sse demo</title>
</head>
<script src="jquery-3.4.1.min.js"></script>
<script>
    var sse;
    var sse2;
    var sse3;
    var sseUrl="http://localhost:8250/sse/push";
    function openSse() {
        if(typeof(EventSource) == "undefined") {
        	console.log("Your browser does not support html5 sse");
        }else{
        	sseUrl="http://localhost:8250/sse/push";
        	processSse();
        }
    }
    function openSse2() {
    	if(typeof(EventSource) == "undefined") {
        	console.log("Your browser does not support html5 sse");
        }else{
        	sseUrl="http://localhost:8250/sse/push2";
        	processSse2();
        }
    }
    function openSse3() {
    	if(typeof(EventSource) == "undefined") {
        	console.log("Your browser does not support html5 sse");
        }else{
        	sseUrl="http://localhost:8250/sse/push3";
        	processSse3();
        }
    }
    function processSse() {
    	if(sse!=null){
            sse.close();
            sse=null;
        }
        sse = new EventSource(sseUrl);
        
        sse.onopen = function() {
            console.log("sse open");
        };
        
        sse.onmessage = function(msg) {
        	console.log("sse message", msg)
        	var data = msg.data;
            showMsg(data);
        };
        
        sse.onclose = function() {
            console.log("sse close");
        };
        
        sse.onerror = function() {
            console.error("sse error");
            sse.close();
        }
    }
    function processSse2() {
    	if(sse2!=null){
            sse2.close();
            sse2=null;
        }
        sse2 = new EventSource(sseUrl);
        
        sse2.onopen = function() {
            console.log("sse2 open");
        };
        
        sse2.onmessage = function(msg) {
        	console.log("sse2 message", msg)
        	var data = msg.data;
            showMsg2(data);
        };

        sse2.onerror = function() {
            console.error("sse2 error");
            sse2.close();
        }
    }
    function processSse3() {
    	if(sse3!=null){
            sse3.close();
            sse3=null;
        }
        sse3 = new EventSource(sseUrl);
        
        sse3.onopen = function() {
            console.log("sse3 open");
        };
        
        sse3.onmessage = function(msg) {
        	console.log("sse3 message", msg)
        	var data = msg.data;
            showMsg3(data);
        };

        sse3.onerror = function() {
            console.error("sse3 error");
            sse3.close();
        }
    }
    function closeSse() {
	    if(sse!=null){
	        sse.close();
	        sse=null;
	    }
    }
    function closeSse2() {
	    if(sse2!=null){
	        sse2.close();
	        sse2=null;
	    }
    }
    function closeSse3() {
	    if(sse3!=null){
	        sse3.close();
	        sse3=null;
	    }
    }
    function showMsg(data) {
    	var text = "<div>";
    	text += data + "</div>";
    	$("#output").prepend(text);
    }
    function showMsg2(data) {
    	var text = "<div>";
    	text += data + "</div>";
    	$("#output2").prepend(text);
    }
    function showMsg3(data) {
    	var text = "<div>";
    	text += data + "</div>";
    	$("#output3").prepend(text);
    }
</script>
<body>
<a href="index.html"><h4>go websocket demo</h4></a>
<div><button onclick="openSse()">open sse</button><button onclick="closeSse()">close sse</button></div>
<div><button onclick="openSse2()">open sse2</button><button onclick="closeSse2()">close sse2</button></div>
<div><button onclick="openSse3()">open sse3</button><button onclick="closeSse3()">close sse3</button></div>
<div id="output" style="background-color: #000000; color: #FFFFFF; max-height: 300px; overflow: scroll;"></div>
<div id="output2" style="background-color: #000000; color: #FFFFFF; max-height: 300px; overflow: scroll;"></div>
<div id="output3" style="background-color: #000000; color: #FFFFFF; max-height: 300px; overflow: scroll;"></div>
</body>
</html>